<template>
    <div class="text-style">
        <el-row :gutter="10">
            <el-col :span="16">
                <el-select v-model="modelValue.font" placeholder="Select">
                    <el-option label="跟随系统" value="" />
                </el-select>
            </el-col>
            <el-col :span="8">
                <input-number v-model="modelValue.fontSize" unit="px"></input-number>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="15">
                <el-select v-model="modelValue.font" placeholder="Select">
                    <el-option label="跟随系统" value="" />
                </el-select>
            </el-col>
            <el-col :span="3">
                <span class="text-style-box">B</span>
            </el-col>
            <el-col :span="3">
                <span class="text-style-box">I</span>
            </el-col>
            <el-col :span="3">
                <span></span>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import inputNumber from "../inputNumber/inputNumber.vue"
const props = defineProps({
    modelValue: {
        type: Object,
        default() {
            return {
                font: '',
                fontSize: '12px'
            }
        }
    }
})

const emit = defineEmits(['update:modelValue'])


</script>
